import React, { useRef, useEffect, useState } from 'react';
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { RingStyled } from './style';
import { toThousands } from '@/utils/tools/common';
import { CommonArrType } from '@/services/types';
import { useSelector } from 'react-redux';
import { RootState } from '@/store';
import { MainState } from '@/store/reducers/main';

echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);

type RingPropsType = {
  data: CommonArrType[] | undefined;
};

const Ring: React.FC<RingPropsType> = (props) => {
  const chartRef = useRef(null);
  const { curTab } = useSelector<RootState, MainState>((state) => state.main);
  const [data, setData] = useState<{ name: string; value: number }[]>();

  useEffect(() => {
    if (props.data) {
      let data = props.data.map((item) => ({ name: item.name, value: item.number }));
      setData(data);
    }
  }, [props.data]);

  // let legend = {
  //   //orient: 'horizontal',
  //   orient: 'vertical',
  //   //y: 'bottom',
  //   x: 'right',
  //   //top: 'bottom',
  //   top: 'center',
  //   textStyle: {
  //     color: '#fff',
  //   },
  // };

  let legend = {
    type: 'scroll',
    textStyle: {
      color: '#fff',
    },
    scrollDataIndex: 0,
    orient: 'vertical',
    right: 10,
    // data: data,
    // itemGap: 20,
    top: 'middle',
    align: 'left',
    pageIconColor: 'rgba(255,255,255,1)', //激活的分页按钮颜色
    pageIconInactiveColor: 'rgba(255,255,255,0.5)', //没激活的分页按钮颜色
    pageTextStyle: {
      color: '#fff',
    },
    // icon: 'circle',
    formatter: (name: any) => {
      if (!name) return '';
      if (name.length > 10) {
        name = name.slice(0, 10) + '...';
      }
      return name;
    },
  };

  let option = {
    tooltip: {
      trigger: 'item',
      show: false,
    },
    legend,
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['38%', '60%'],
        center: curTab === 'all' ? ['30%', '50%'] : ['40%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
          formatter: '{c}\n\n{b}\n{d}%',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold',
            color: '#fff',
          },
        },
        labelLine: {
          show: false,
        },
        data,
      },
    ],
  };

  useEffect(() => {
    let chart: any = null;
    if (chartRef.current) {
      // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
      chart = echarts.init(chartRef.current);
      // 设置图表实例的配置项和数据
      option && chart.setOption(option);
    }

    // 组件卸载
    return () => {
      // myChart.dispose() 销毁实例。实例销毁后无法再被使用
      chart.dispose();
    };
  }, [data]);

  // option && myChart.setOption(option);
  return (
    <RingStyled>
      <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>
    </RingStyled>
  );
};

export default Ring;
